<#escape x as x?html>


<SCRIPT type="text/javascript">


var selectMenuZtree;
var menujsondata4select;

var menuSelectSetting = {
		callback: {
			onClick: clickMenuValue
		},
	data : {
		simpleData : {
			enable : true,
			idKey : "id",
			pIdKey : "pid",
			rootPId :"null"
		}
	}
};


function clickMenuValue(event, treeId, treeNode) {
	jQuery("#pname").val(treeNode.name);
	jQuery("#pid").val(treeNode.id);
    
    
};

	



	var menuTreesetting = {
		callback: {
			onClick:MenuzTreeOnClick
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pid",
				rootPId : "null"
			}
		}
	};
	
	
	$(document).ready(function() {
		$("[name='iconName']").click(function(){
			$("#menuIcon").val($(this).text().replace(/(^\s+)|(\s+$)/g, ""));
			layer.closeAll();
		});
		
		jQuery.post("${ctx}/system/menu/list/json",
				function(_json) {
					if (_json.status == "success") {
						menujsondata4select=_json;
						$.fn.zTree.init($("#menuListTree"), menuTreesetting,_json.data);
						zTree =$.fn.zTree.getZTreeObj("menuListTree");
					} else {
						myalert(_json.message);
					}
				});
		
	});
	
	function MenuzTreeOnClick(event, treeId, treeNode) {
	    showdata(treeNode);
	};
	
	function showdata(result) {
	    $("#btn_add").hide();
	    $("#btn_update").show();
	    $("#btn_reload").show();
	    $("#btn_delete").show();
	    
		$("#updateForm select ").each(function() {
			$(this).find('option:first').attr('selected', 'selected');
		});
		//console.log(result);
		for (var s in result) {
			set_val(s, result[s]);
		}
		
		var _pid=result["pid"];
		if((!_pid)||_pid==null||_pid=="null"||_pid==""){
			jQuery("#pid").val("");
		}else{
			jQuery("#pid").val(_pid);
		}
		
		
		var _pNode= result.getParentNode();
		if(_pNode){
			jQuery("#pname").val(_pNode["name"]);
		}else{
			jQuery("#pname").val("");
		}
		
	}
	
	
	function deleteMenu(){
		myconfirm('删除这个菜单，是否继续?', function(index){
			var id=jQuery("#id").val();
			if(!id||id==""){
				//myalert("请选择你要删除的记录");
				myalert('请选择你要删除的记录!');
				return false;
			}else{
				//var _url="${ctx}/system/menu/delete?id="+id;
				var _url="${ctx}/system/menu/delete";
				var listurl="${ctx}/system/menu/list";
				//mydelete(_url,listurl);
				var data={"id":id};
				ajaxpostonlayer(_url,listurl,data,'删除菜单成功！');
			}
			  layer.close(index);
		});
	}
	

	
   function dosubmit(i){
		
        var msg="菜单添加成功！";
        if(i==1){
        	msg="菜单更新成功！";
        }
        var listurl='${ctx}/system/menu/list';
        if(i==0){
        	commonSaveForm("updateForm",listurl,msg);
        }else{
        	commonUpdateForm("updateForm",listurl,msg);
        }
        
	}
   
	function changeIcon(){
		//页面层-自定义
		layer.open({
		  shadeClose:true,
		  closeBtn: 1,
		  btn: ['确定'], //按钮
		  type: 1,
		  title: "选择图标",
		  skin: 'layui-layer-rim', //加上边框
		  area: ['700px', '500px'], //宽高
		  //shadeClose: true,
		  content: $("#icon_wrap")
		});
		
	}
   
	function showMenuZTree(){
		if(!selectMenuZtree){
			$.fn.zTree.init($("#menuZtree"), menuSelectSetting,menujsondata4select.data);
			
			selectMenuZtree =$.fn.zTree.getZTreeObj("menuZtree");
			selectMenuZtree.expandAll(true);
	    	 selectZtreeOneNode(jQuery("#pid").val(),"menuZtree");
		}
		//页面层-自定义
		layer.open({
		  shadeClose:true,
		  closeBtn: 1,
		  btn: ['确定'], //按钮
		  type: 1,
		  title: "选择父菜单",
		  skin: 'layui-layer-rim', //加上边框
		  area: ['600px', '400px'], //宽高
		  //shadeClose: true,
		  content: $("#div_menuZtree")
		});
		
	}


	
	</SCRIPT>

<div class="operate panel panel-default" style="height:65px;">
	<div class="panel-body">
		<div class="pull-right">
			 <@shiro.hasPermission
			name="/system/menu/update" >
			<a id="btn_reload" style="display: none;"  href="javascript:location.reload();"
				class="btn  btn-sm  btn-primary"  >
				跳转至新增 >>
			</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<a id="btn_add"   href="javascript:dosubmit(0);"
				class="btn  btn-sm  btn-primary">
				<img src="${ctx}/images/btn_save.png" style="vertical-align: middle;" />保存新增
			</a>
				<a id="btn_update" style="display: none;"   href="javascript:dosubmit(1);"
				class="btn  btn-sm  btn-primary">
				<img src="${ctx}/images/btn_save.png" style="vertical-align: middle;" />保存修改
			</a>
			
			</@shiro.hasPermission>
			 <@shiro.hasPermission name="/system/menu/delete" >
			<a id="btn_delete" style="display: none;"   href="javascript:deleteMenu();" class="btn btn-sm btn-danger">
				 删除
			</a>
			</@shiro.hasPermission>
		</div>
	</div>
</div>
<!-- 功能操作区域结束 -->
<!-- 列表显示区域  -->
<div class="row">
	<div class="col-sm-4">
		<div class="widget-box">
			<div class="widget-header">
				<h4 class="widget-title">菜单</h4>
			</div>
			<div class="widget-body">
				<div class="widget-main">
					<ul id="menuListTree" class="ztree"></ul>
				</div>
			</div>
		</div>
	</div>
	<div class="col-sm-8">
		<div class="widget-box">
			<div class="widget-header">
				<h4 class="widget-title">菜单信息</h4>
			</div>
			<div class="widget-body">
				<div class="widget-main">
					<form id="updateForm" name="updateForm"  action="${ctx}/system/menu/update"   method="post" class="form-horizontal clearfix">
						<input type="hidden" name="id" id="id">
						<div class="form-group col-xs-9">
							<label class="col-sm-4 control-label" for="name">名称*：</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="name" name="name"  datatype="*"   nullmsg="名称不能为空" />
							</div>
						</div>
			
						<div class="form-group col-xs-9">
							<label class="col-sm-4 control-label" for="url">地址：</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="pageurl" name="pageurl">
							</div>
						</div>
			
						<div class="form-group col-xs-9">
							<label class="col-sm-4 control-label" for="pid">父节点：</label>
							<div class="col-sm-8">
								<div class="input-group">
									<input name="pname" class="form-control val" id="pname" type="text"  readonly="readonly"/>
									<input name="pid"  id="pid" type="hidden" msg="请选择父节点" check="require"  />
									<span class="input-group-btn">
											<a href="javascript:showMenuZTree();" data-title="选择父节点" class="btn btn-sm btn-primary">
												<i class="fa fa-search"></i>
											</a>
									 </span>
								</div>
							</div>
						</div>
						
						<div class="form-group col-xs-9">
							<label class="col-sm-4 control-label" for="type">资源类型：</label>
							<div class="col-sm-8">
								<select   name="type" id="type" class="form-control">
									<option  value="0">按钮资源</option>
									<option value="1">导航菜单</option>
								</select>
							</div>
						</div>
						
						
						<div class="form-group col-xs-9">
							<label class="col-sm-4 control-label" for="menuIcon">图标：</label>
							<div class="col-sm-8">
									<input name="menuIcon" class="form-control" id="menuIcon" onclick="changeIcon()" type="text"  readonly="readonly" />
							</div>
						</div>
						<div class="form-group col-xs-9">
							<label class="col-sm-4 control-label" for="sortno">排序：</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="sortno" name="sortno" >
							</div>
						</div>
			
						<div class="form-group col-xs-9">
							<label class="col-sm-4 control-label" for="state">是否可用*：</label>
							<div class="col-sm-8">
								<select   name="state" id="state" class="form-control">
									<option  value="是">是</option>
									<option value="否">否</option>
								</select>
							</div>
						</div>
			
						<div class="form-group col-xs-9">
							<label class="col-sm-4 control-label" for="description" >备注：</label>
							<div class="col-sm-8" >
								<textarea class="form-control" name="description"  id="description" rows="5" class="col-xs-12" ></textarea>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div></div>
		</div>
		
	</div>
</div>

<div id="div_menuZtree">
	<ul id="menuZtree" class="ztree"></ul>
</div>

<div  style="display:none;" id="icon_wrap">
	<div class="col-xs-6 col-sm-3">
		<ul class="list-unstyled">
			<li name="iconName">
				<i class="ace-icon fa fa-adjust"></i>
				fa-adjust
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-asterisk"></i>
				fa-asterisk
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-ban"></i>
				fa-ban
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-bar-chart-o"></i>
				fa-bar-chart-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-barcode"></i>
				fa-barcode
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-flask"></i>
				fa-flask
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-beer"></i>
				fa-beer
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-bell-o"></i>
				fa-bell-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-bell"></i>
				fa-bell
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-bolt"></i>
				fa-bolt
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-book"></i>
				fa-book
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-bookmark"></i>
				fa-bookmark
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-bookmark-o"></i>
				fa-bookmark-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-briefcase"></i>
				fa-briefcase
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-bullhorn"></i>
				fa-bullhorn
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-calendar"></i>
				fa-calendar
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-camera"></i>
				fa-camera
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-camera-retro"></i>
				fa-camera-retro
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-certificate"></i>
				fa-certificate
			</li>
		</ul>
	</div>

	<div class="col-xs-6 col-sm-3">
		<ul class="list-unstyled">
			<li name="iconName">
				<i class="ace-icon fa fa-check-square-o"></i>
				fa-check-square-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-square-o"></i>
				fa-square-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-circle"></i>
				fa-circle
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-circle-o"></i>
				fa-circle-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-cloud"></i>
				fa-cloud
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-cloud-download"></i>
				fa-cloud-download
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-cloud-upload"></i>
				fa-cloud-upload
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-coffee"></i>
				fa-coffee
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-cog"></i>
				fa-cog
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-cogs"></i>
				fa-cogs
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-comment"></i>
				fa-comment
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-comment-o"></i>
				fa-comment-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-comments"></i>
				fa-comments
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-comments-o"></i>
				fa-comments-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-credit-card"></i>
				fa-credit-card
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-tachometer"></i>
				fa-tachometer
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-desktop"></i>
				fa-desktop
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-arrow-circle-o-down"></i>
				fa-arrow-circle-o-down
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-download"></i>
				fa-download
			</li>
		</ul>
	</div>

	<div class="col-xs-6 col-sm-3">
		<ul class="list-unstyled">
			<li name="iconName">
				<i class="ace-icon fa fa-pencil-square-o"></i>
				fa-pencil-square-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-envelope"></i>
				fa-envelope
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-envelope-o"></i>
				fa-envelope-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-exchange"></i>
				fa-exchange
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-exclamation-circle"></i>
				fa-exclamation-circle
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-external-link"></i>
				fa-external-link
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-eye-slash"></i>
				fa-eye-slash
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-eye"></i>
				fa-eye
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-video-camera"></i>
				fa-video-camera
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-fighter-jet"></i>
				fa-fighter-jet
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-film"></i>
				fa-film
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-filter"></i>
				fa-filter
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-fire"></i>
				fa-fire
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-flag"></i>
				fa-flag
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-folder"></i>
				fa-folder
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-folder-open"></i>
				fa-folder-open
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-folder-o"></i>
				fa-folder-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-folder-open-o"></i>
				fa-folder-open-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-cutlery"></i>
				fa-cutlery
			</li>
		</ul>
	</div>

	<div class="col-xs-6 col-sm-3">
		<ul class="list-unstyled">
			<li name="iconName">
				<i class="ace-icon fa fa-gift"></i>
				fa-gift
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-glass"></i>
				fa-glass
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-globe"></i>
				fa-globe
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-users"></i>
				fa-users
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-hdd-o"></i>
				fa-hdd-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-headphones"></i>
				fa-headphones
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-heart"></i>
				fa-heart
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-heart-o"></i>
				fa-heart-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-home"></i>
				fa-home
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-inbox"></i>
				fa-inbox
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-info-circle"></i>
				fa-info-circle
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-key"></i>
				fa-key
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-leaf"></i>
				fa-leaf
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-laptop"></i>
				fa-laptop
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-gavel"></i>
				fa-gavel
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-lemon-o"></i>
				fa-lemon-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-lightbulb-o"></i>
				fa-lightbulb-o
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-lock"></i>
				fa-lock
			</li>

			<li name="iconName">
				<i class="ace-icon fa fa-unlock"></i>
				fa-unlock
			</li>
		</ul>
	</div>
</div>
</#escape>